<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg" @keyup.enter="add()" id="messageInput"/>
			
			<button @click="clear()">清空</button>
			
				<p></p>
				<table border="1" cellspacing="0" cellpadding="0">
				<tr> <!-- 行标签 -->
					<td>姓名</td> <!-- 单元格标签 -->
					<td>年龄</td>
					<td>candrive</td>
				</tr>
				<tr v-for="p in persons">
					<td>{{p.name}}</td>
					<td>{{p.age}}</td>
					<td>{{p.age>=18?'yes':'no'}}</td>
				</tr>
			</table>
			
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:function(){
					return{
						msg:"",
						persons:[
							{name:"韩梅梅",age:19},
							{name:"李雷",age:14}
						]
					}
				},
				methods:{
					add(){
						var a =JSON.parse(this.msg);
						// 将字符串对象化
						return this.persons.push(a);
						// 输入框里添加{"name":"hanyun","age":25}
						
						
				},
					clear(){
					            if(this.msg){
					                this.msg = '';
					            }
					        }


	 }
					
				
			})
		</script>
	</body>
</html>
